<script setup lang="ts">
import Taro, { getCurrentPages } from "@tarojs/taro";
import ByIcon from "../ui/ByIcon.vue";

const props = withDefaults(
  defineProps<{
    title?: string;

    // 重启动目标页面
    launchUrl?: string;

    // 展示返回按钮
    showBack?: boolean;
  }>(),
  {
    showBack: true,
  }
);
const info = Taro.getWindowInfo();

const handleBack = () => {
  const flag = getCurrentPages().length == 1;
  if (flag) {
    Taro.reLaunch({ url: props.launchUrl || "/pages/index/index" });
  } else {
    Taro.navigateBack({ delta: 1 });
  }
};

// 胶囊几何信息
const buttonInfo = Taro.getMenuButtonBoundingClientRect();
const styleRight = info.windowWidth - buttonInfo.left;
</script>

<template>
  <view
    class="pb-2"
    :style="{
      paddingTop: buttonInfo.top + 'px',
      paddingRight: styleRight + 'px',
    }"
  >
    <view class="flex items-center px-3">
      <view
        v-if="showBack"
        class="flex-center w-[46px] h-[46px] mr-3"
        @tap="handleBack"
      >
        <ByIcon name="ArrowLeft" :size="36" />
      </view>

      <view
        class="relative flex-auto items-center min-h-[70px]"
        :style="{ minHeight: buttonInfo.height + 'px' }"
      >
        <slot>
          <text class="text-xl">{{ title }}</text>
        </slot>
      </view>
    </view>
  </view>
</template>
